<template>
  <b-container>
    <b-row>
      <b-col cols="12">
        <b-tabs content-class="mt-3">
          <b-tab :title="CommentState[0]" active>
            <b-card-group deck class="flex-column">
              <b-card
                class="my-1"
                border-variant="info"
                v-for="(commentData, index) of unVerifyCommentList"
                :key="index"
                :header="`SocketId: ${commentData.from}`"
                no-body
              >
                <b-card-body>
                  <b-card-title>NewsDocumentId: {{commentData.refNewsId}}</b-card-title>
                  <b-card-sub-title>Comment: </b-card-sub-title>
                  <b-card-text><b-alert variant="secondary" show>{{commentData.data}}</b-alert></b-card-text>
                </b-card-body>
                <b-card-footer class="text-right">
                  <b-button :disabled="!isValidToSendBySocket" variant="danger" class="mx-1" @click="verifyComment(commentData, CommentState[2])">{{CommentState[2]}}</b-button>
                  <b-button :disabled="!isValidToSendBySocket" variant="primary" class="mx-1" @click="verifyComment(commentData, CommentState[1])">{{CommentState[1]}}</b-button>
                </b-card-footer>
              </b-card>
            </b-card-group>
          </b-tab>
          <b-tab :title="CommentState[1]">
            <b-card-group deck class="flex-column">
              <b-card
                class="my-1"
                border-variant="success"
                v-for="(commentData, index) of verifiiedPassCommentList"
                :key="index"
                :header="`SocketId: ${commentData.from}`"
                :title="`NewsDocumentId: ${commentData.refNewsId}`"
              >
                <b-card-sub-title>Comment: </b-card-sub-title>
                <b-card-text><b-alert variant="secondary" show>{{commentData.data}}</b-alert></b-card-text>
              </b-card>
            </b-card-group>
          </b-tab>
          <b-tab :title="CommentState[2]">
            <b-card-group deck class="flex-column">
              <b-card
                class="my-1"
                border-variant="danger"
                v-for="(commentData, index) of verifiiedNotPassCommentList"
                :key="index"
                :header="`SocketId: ${commentData.from}`"
                :title="`NewsDocumentId: ${commentData.refNewsId}`"
              >
                <b-card-sub-title>Comment: </b-card-sub-title>
                <b-card-text><b-alert variant="secondary" show>{{commentData.data}}</b-alert></b-card-text>
              </b-card>
            </b-card-group>
          </b-tab>
        </b-tabs>
      </b-col>
    </b-row>
  </b-container>
</template>
<script>
import { mapGetters, mapState } from 'vuex'
import { CommentState } from '../constants'

export default {
  data() {
    return {};
  },
  computed: {
    ...mapState({
      commentList: 'commentList',
    }),
    ...mapGetters({
      isValidToSendBySocket: 'isValidToSendBySocket',
    }),
    unVerifyCommentList: function() {
      return this.commentList.filter(comment => comment.state == CommentState[0]);
    },
    verifiiedPassCommentList: function() {
      return this.commentList.filter(comment => comment.state == CommentState[1]);
    },
    verifiiedNotPassCommentList: function() {
      return this.commentList.filter(comment => comment.state == CommentState[2]);
    },
    CommentState() {
      return CommentState;
    },
  },
  sockets: {
    watchComment(payload) {
      const vm = this;
      vm.$store.commit('appendSingleComment', payload);
    },
    setId() {
      const vm = this;
      vm.$nextTick(function() {
        vm.init();
      });
    },
  },
  methods: {
    init() {
      const vm = this;
      vm.$store.dispatch('obtainAllComment');
      vm.$store.dispatch('adminLogin');
    },
    verifyComment(comment, state) {
      const vm = this;
      vm.$store.dispatch('verifyComment', {
        _id: comment.refNewsId,
        data: {
          commentId: comment._id,
          state: state,
        }
      })
    },
  },
  created() {
    const vm = this;
    if (vm.isValidToSendBySocket) {
      vm.init();
    }
  },
  
}
</script>